<template>
  <div>
    <h1>这是child组件</h1>
    父组件传递过来的数据：{{ msg }}
    <div>
      <button @click="send">传值给父组件</button>
    </div>
  </div>
</template>

<script>
import { on } from 'events';
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  name: 'Detail',
  // 接收父组件传递过来的参数
  // props接收的数据不能直接修改
  props: {
    msg: {
      // 数据类型校验
      type: String,
      // 是否必传
      required: true,
      // 默认值
      default: '默认值'
    }
  },
  setup(props, ctx) {
    console.log(props);
    let childMsg = ref('我是子组件的数据')
    let childNum = ref(20)

    // 通过点击事件传送数据给父组件
    const send = () => {
      // 是通过ctx.emit分发事件
      // emit第一个参数是事件名称 第二个参数是传递的数据
      ctx.emit('send', [childMsg.value, childNum.value])
    }

    // 通过加载事件传送数据给父组件
    onMounted(() => {
      // ctx.emit('send', childMsg.value)
      ctx.emit('send', {
        msg: childMsg.value,
        num: childNum.value
      })
    })

    return {
      childMsg,
      send
    }
  }
})
</script>
